
  // var socket = io.connect('http://localhost:8080');
  var uid = "";
  var onDisplay = new Map();
  var hRow = new Array();
  var rRow = new Array();
  var canvas = document.getElementById('danmuku');
  var totrow = Math.round(canvas.height / 30);
  var ct = canvas.getContext('2d');
  var cache = document.createElement("canvas");
  cache.width = canvas.width;
  cache.height = canvas.height;
  var cat = cache.getContext('2d');
  ct.font = '24px sans-serif';
  cat.font = '24px sans-serif';
  for (var i = 0 ; i < totrow ; i++) {
    hRow[i]=rRow[i]=0;
  }
  
  function drawColorText( dct , text , tx , ty , cr , cg , cb) {
    dct.fillStyle = "rgb("+cr+","+cg+","+cb+")";
    dct.fillText(text,tx,ty);
  }
  
  function draw() {
    var time = new Date();
    onDisplay.forEach(function (value, key, mapObj) {
      if (key < time - (value.dir == 'ltr' ? '9000' : '8000')) {
        console.log("RM "+key);
        value.dir == 'ltr' ? 
        hRow[value.pos] = hRow[value.pos] - 1 :
        rRow[value.pos] = rRow[value.pos] - 1 ;
        onDisplay.delete(key);
      } else {
        drawColorText(cat ,
                      value.text , 
                      value.dir == 'ltr' ? 
                      cache.width + ( ( cache.width + value.len ) * (key - time) / 8000 ) :
                      cache.width/2 - value.len/2 ,
                      (1 + value.pos) * 30 ,
                      value.color.r ,
                      value.color.g ,
                      value.color.b );
      }
    });
    ct.clearRect(0, 0, canvas.width,canvas.height);
    ct.drawImage(cache, 0, 0); 
    cat.clearRect(0, 0, cache.width,cache.height);
  }
  
  setInterval(draw,20);